<template>
    <div class="category">
        <div
            class="category_item"
            v-for="item of list"
            :key="item.categoryId"
            @click="tips(item.categoryId)"
        >
            <img :src="item.imgUrl" :alt="item.name" />
            <p>{{ item.name }}</p>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    props:['list','tips'],
    setup() {
        return {};
    },
});
</script>

<style lang="scss" scoped>
.category {
    &_item {
        text-align: center;
        display: inline-block;
        width: 20%;
        img {
            width: 36px;
            height: 36px;
            margin: 14px auto;
        }
    }
}
</style>
